<template>
  <div class="buttonGroup">
    <el-radio-group v-model="pictureOption">
      <el-radio-button label="不显示"  @click="handleClear"></el-radio-button>
      <el-radio-button label="饼状图"  @click="handleCake"></el-radio-button>
      <el-radio-button label="环形图"  @click="handleCircle"></el-radio-button>
      <el-radio-button label="柱状图"  @click="handleBar"></el-radio-button>
    </el-radio-group>
  </div>
  <div v-if="showCake === 'primary'" class="cake" :id="cakeId"></div>
  <div v-if="showCircle === 'primary'" class="circle" :id="circleId"></div>
  <div v-if="showBar === 'primary'" class="bar" :id="barId"></div>
</template>

<script>
import * as echarts from 'echarts'
import {v4 as uuidv4} from 'uuid'
export default {
  name: "Graph",
  created() {
    this.cakeId = uuidv4()
    this.circleId = uuidv4()
    this.barId = uuidv4()
  },
  props: {
    options: Array
  },
  data() {
    return {
      cakeId: '',
      circleId: '',
      barId: '',
      pictureOption: '不显示',
      showCake: '',
      showCircle: '',
      showBar: ''
    }
  },
  methods: {
    handleCake(){
      this.showCake = 'primary'
      this.showCircle = ''
      this.showBar = ''
      this.$nextTick(() => {
        this.drawCake()
      })
    },
    handleCircle() {
      this.showCake = ''
      this.showCircle = 'primary'
      this.showBar = ''
      this.$nextTick(() => {
        this.drawCircle()
      })
    },
    handleBar() {
      this.showCake = ''
      this.showCircle = ''
      this.showBar = 'primary'
      this.$nextTick(() => {
        this.drawBar()
      })
    },
    handleClear() {
      this.showCake = ''
      this.showCircle = ''
      this.showBar = ''
    },
    drawCake() {
      let myChart = echarts.getInstanceByDom(document.getElementById(this.cakeId)); //有的话就获取已有echarts实例的DOM节点。
      if (myChart == null) { // 如果不存在，就进行初始化。
        myChart = echarts.init(document.getElementById(this.cakeId));
      }
      // let myChart = echarts.init(document.getElementById(this.cakeId))
      let data = []
      this.options.forEach(option => {
        data.push({name: option.text, value: option.optionAmount})
      })
      let option = {
        title: {},
        tooltip: {
          trigger: 'item',
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '选择选项',
            type: 'pie',
            radius: '50%',
            data: data
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
      option && myChart.setOption(option)
      window.onresize = function () {
        setTimeout(() => {
          myChart.resize()
        }, 500)
      }
    },
    drawCircle() {
      let myChart = echarts.getInstanceByDom(document.getElementById(this.circleId)); //有的话就获取已有echarts实例的DOM节点。
      if (myChart == null) { // 如果不存在，就进行初始化。
        myChart = echarts.init(document.getElementById(this.circleId));
      }
      // let myChart = echarts.init(document.getElementById(this.circleId))
      let data = []
      this.options.forEach(option => {
        data.push({name: option.text, value: option.optionAmount})
      })
      let option = {
        legend: {
          left: 'left',
          orient: 'vertical',
        },
        tooltip: {
          trigger: 'item',
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '选择选项',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            data: data,
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              },
              labelLine: {
                show: false
              },

            }
          }
        ],

      }
      myChart.setOption(option, true)
      window.onresize = function () {
        setTimeout(() => {
          myChart.resize()
        }, 500)
      }
    },
    drawBar() {
      let myChart = echarts.getInstanceByDom(document.getElementById(this.barId)); //有的话就获取已有echarts实例的DOM节点。
      if (myChart == null) { // 如果不存在，就进行初始化。
        myChart = echarts.init(document.getElementById(this.barId));
      }
      // let myChart = echarts.init(document.getElementById(this.barId))
      let dataAxis = this.options.map(option => option.text)

      let data = this.options.map(option => option.optionAmount)

      let yMax = 500;
      let dataShadow = [];

      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      let option = {
        title: {
          subtext: '双指在触控板下滑或上滑可以放大或缩小'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          left: 'left',
          orient: 'vertical',
        },
        tooltip: {
          trigger: 'item',
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'}
                  ]
              )
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#2378f7'},
                      {offset: 0.7, color: '#2378f7'},
                      {offset: 1, color: '#83bff6'}
                    ]
                )
              }
            },
            data: data
          }
        ]
      };

// Enable data zoom when user click bar.
      let zoomSize = 6;
      myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      });
      myChart.setOption(option, true)
      window.onresize = function () {
        setTimeout(() => {
          myChart.resize()
        }, 500)
      }
    }
  }
}
</script>

<style scoped>
.buttonGroup {
  position: absolute;
  right: 28.7%;
}

.cake {
  height: 600px;
  width: 60%;
  margin-top: 40px;
}

.circle {
  height: 600px;
  width: 60%;
  margin-top: 40px;
}
.bar {
  height: 600px;
  width: 60%;
  margin-top: 40px;
}
</style>